<template>
    <div class="createPost-container">
        <!-- <el-form class="form-container" style="width:600px; margin-top:20px">
            <div class="createPost-main-container">
                <div style="padding: 10px 0px 20px 20px">
                    绑定手机端：<label v-if="store.uid > 0">已绑定</label><label v-else>未绑定</label>
                </div>
                <el-form ref="mobile_form" :rules="rules_mobile" :model="temp_mobile" label-position="left" label-width="70px" style="width: 570px; margin-left: 50px">
                    <el-form-item style="margin-bottom: 40px;" label="手机号:" prop="mobile">
                        <el-input v-model="temp_mobile.mobile" :rows="1" class="article-textarea" autosize placeholder="请输入手机号" style="width:400px" />
                        <el-button type="primary" style="margin-left:10px" @click="modifyMobile()">绑定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-form> -->
        <!-- <div>
            <label v-if="store.withdraw_account_type !== null && store.withdraw_account_type !== '' && store.withdraw_account_type !== undefined">已绑定提现账户：{{ store.withdraw_account }}</label>
            <div v-else>
                <el-button type="danger" @click="bindWithdraw">绑定当前手机号微信为提现账户</el-button>
            </div>
        </div> -->
        <div>
            <label>绑定公众号微信openid：{{ mp_fans && mp_fans.openid != null ? mp_fans.openid : '尚未绑定' }}</label>
            <div style="margin: 20px 20px 0px 20px">
                <vue-qr v-if="clerk.uid > 0" :text="qrcode.value" :size="200" :margin="0" />
            </div>
            <div style="color: grey;font-size: 12px">微信扫码绑定，绑定前请先关注公众号！</div>
        </div>
    </div>
</template>

<script>
import { fetch as fetchClerk } from '@/clerk/api/clerk'
import { ofUser as fansOfUser } from '@/ucenter/api/fans'
import VueQr from 'vue-qr'

export default {
    components: { VueQr },
    data() {
        const validateRequire = (rule, value, callback) => {
            var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
            if (!myreg.test(value)) {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            id: 0,
            clerk: {},
            mp_fans: {},
            // temp_mobile: {
            //     mobile: ''
            // },
            // rules_mobile: {
            //     mobile: [{ validator: validateRequire, message: '请输入有效手机号', trigger: 'blur' }]
            // },
            // loading: false,
            // tempRoute: {},
            qrcode: {
                value: ''
            }
        }
    },
    computed: {

    },
    created() {
        this.id = this.$route.query.id
        this.qrcode.value = ((document.location.protocol === 'https:') ? 'https' : 'http') + '://' + window.location.host + '/mobile?i=3#/clerk/pages/bind/mp?clerk_id=' + this.id
        this.fetchData()
    },
    methods: {
        fetchData() {
            const query = { id: this.id }
            fetchClerk(query).then((response) => {
                this.clerk = response.data.clerk
                if(this.clerk.uid > 0) {
                    // getPid().then(res => {
                    //     let pid = res.data.pid
                    //     this.qrcode.value = ((document.location.protocol === 'https:') ? 'https' : 'http') + '://' + window.location.host + '/mobile#/ucenter/pages/bind/mp?uid=' + this.clerk.uid + '&pid=' + pid
                    // })
                    // fansOfUser({
                    //     uid: this.clerk.uid,
                    //     platform: 'mp'
                    // }).then(res => {
                    //     this.mp_fans = res.data
                    // })
                }
                // this.temp_mobile.mobile = this.store.mobile

                // Just to simulate the time of the request
                setTimeout(() => {
                    this.loading = false
                }, 1.5 * 1000)
            })
        },
        // modifyMobile() {
        //     this.$refs.mobile_form.validate(valid => {
        //         if (valid) {
        //             const data = {
        //                 store_id: this.id,
        //                 mobile: this.temp_mobile.mobile
        //             }
        //             bindUser(data).then(res => {
        //                 this.store.uid = res.data.uid
        //                 this.$message({
        //                     message: '绑定成功！',
        //                     type: 'success'
        //                 })
        //             })
        //         } else {
        //             console.log('mobile error')
        //         }
        //     })
        // },
        // bindWithdraw() {
        //     this.$alert('确认绑定', {
        //         confirmButtonText: '确定',
        //         callback: action => {
        //             if (action == 'confirm') {
        //                 bindAccount({
        //                     store_id: this.store.id
        //                 }).then(res => {
        //                     this.$message({
        //                         message: '绑定成功！',
        //                         type: 'success'
        //                     })
        //                     this.fetchData()
        //                 })
        //             }
        //         }
        //     });
        // }
    }
}
</script>
